<template>
	<el-container>
		<el-header>
			<div class="left-panel">
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
                    <!-- <el-input v-model="search.title" placeholder="关键词搜索" clearable @keyup.enter="upsearch"></el-input>
					<el-date-picker v-model="search.date" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" :value-format="'YYYY-MM-DD'"></el-date-picker>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                    <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button> -->
				</div>
			</div>
		</el-header>
		<el-main>
            <div class="div-body">
                <el-row>
                    <el-col :span="24">
                        <el-calendar style="margin-right: 10px;height:680px;overflow:auto;overflow-x:hidden" v-model="month">
                            <template #date-cell="{ data }">
                                <div style="display: flex;justify-content: space-between;">
                                    {{ data.day.split('-').slice(2).join('-') }}
                                    <el-icon class="el-icon" size="14" v-auth="'plan.add'" @click="addPlan(data.day)">
                                        <component :is="icon6 || 'el-icon-menu'" />
                                    </el-icon>
                                </div>
                                <div style="min-height: 50px;">
                                    <div style="width:100%;display: flex;justify-content: space-between;align-items: center" v-for="item in planData[data.day]" :key="item">
                                        <el-popover placement="top-start" :width="200" trigger="hover" :content="item.title">
                                            <template #reference>
                                                <el-button type="danger" text style="padding: 5px 0;font-size: 14px" class="m-2" v-if="item.date==data.day && item.status == 0" v-auth="'plan.edit'" @click="editPlan(item)">{{ item.title.substring(0, 20) }}</el-button>
                                            </template>
                                        </el-popover>
                                        <div>
                                            <el-icon class="el-icon" v-if="item.date==data.day && item.status == 0" color="#F56C6C" size="14" v-auth="'plan.delete'" @click="delPlan(item)">
                                                <component :is="icon5 || 'el-icon-menu'" />
                                            </el-icon>
                                            <el-icon class="el-icon" style="margin-left: 10px;" color="#409EFF" size="14" v-if="item.date==data.day && item.status == 0" v-auth="'plan.over'" @click="overPlan(item)">
                                                <component :is="icon7 || 'el-icon-check'" />
                                            </el-icon>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </el-calendar>
                    </el-col>
                    <!-- <el-col :span="8">
                        <el-card shadow="hover">
                            <scTable ref="table" row-key="id" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border height="630">
                                <el-table-column type="selection" width="50" reserve-selection align="center"></el-table-column>
                                <el-table-column type="index" label="序号" fixed align="center" width="50"></el-table-column>
                                <el-table-column label="任务名称" prop="title" align="center"></el-table-column>
                                <el-table-column label="日期" prop="date" align="center"></el-table-column>
                                <el-table-column label="内容" prop="content" align="center"></el-table-column>
                                <el-table-column label="操作" fixed="right" align="center" width="80">
                                    <template #default="scope">
                                        <el-button-group style="display:flex;flex-direction:column">
                                            <el-button text type="success" size="small" @click="overPlan(scope.row, scope.$index)" v-auth="'contract.show'" v-if="scope.row.status == 0">完成</el-button>
                                            <el-button text type="primary" size="small" @click="editPlan(scope.row, scope.$index)" v-auth="'contract.edit'">编辑</el-button>
                                            <el-popconfirm title="确定删除吗？" @confirm="delPlan(scope.row, scope.$index)">
                                                <template #reference>
                                                    <el-button text type="danger" size="small" v-auth="'contract.delete'">删除</el-button>
                                                </template>
                                            </el-popconfirm>
                                        </el-button-group>
                                    </template>
                                </el-table-column>
                            </scTable>
                        </el-card>
                    </el-col> -->
                </el-row>
            </div>
		</el-main>
        <el-footer style="height:51px;"></el-footer>
	</el-container>
    <plan-dialog v-if="dialog.plan" ref="planDialog" @success="handleSuccess" @closed="dialog.plan = false"></plan-dialog>
</template>

<script>
import planDialog from './save.vue'
export default {
	name: '日历',
	components: {
		planDialog
	},
	data() {
		return {
			dialog: {
				plan: false,
			},
			icon1: 'el-icon-avatar',
			icon2: 'el-icon-goods',
			icon3: 'el-icon-goods-filled',
			icon4: 'el-icon-toilet-paper',
			icon5: 'el-icon-delete', 
			icon6: 'el-icon-plus',
			icon7: 'el-icon-check',
			search: {
				date: null,
				title: null,
			},
			month: this.moment().format('YYYY-MM'),
			from: {},
            planData: [],
            noticeData: [],
            // apiObj: this.$API.basic.plan.list
		}
	},
	watch: {
		month(val, oldVal) {
            var newmonth = this.moment(val).format('YYYY-MM')
            var oldmonth = this.moment(oldVal).format('YYYY-MM')
			if(newmonth != oldmonth){
				this.plan(newmonth);
			}
		},
	},
	mounted() {
		this.plan(this.month);
	},
	methods: {
		// 格式化日期
		formatTime(time){
			const date = new Date(time);
			var year = date.getFullYear();
			var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
			return year + '-' + month;
		},
		// 添加提醒回调
		handleSuccess(){
			this.plan()
            // this.$refs.table.refresh()
		},
		//提醒
		async plan(month){
			var reqData = { month}
			var res = await this.$API.basic.plan.get_list.get(reqData);
            this.planData = res.data.list2
			if(res.code == 1){
                // let array = []
                // res.data.map(item=>{
                //     item.status == 0
                //     if(item.status == 0){
                //         array.push(item)
                //     }
                // })
                // this.planData = array
			}else{
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		//公告
		async notice(){
			// var reqData = {id: row.id}
			var res = await this.$API.basic.notice.get_list.get();
			if(res.code == 1){
				this.noticeData = res.data
			}else{
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		//搜索
		upsearch() {
            this.$refs.table.upData(this.search)
		},
        refresh() {
            for (const key in this.search) {
                this.search[key] = null;
            }
            this.$refs.table.upData(this.search)
        },
		// 编辑提醒
		editPlan(row){
			console.log(row)
			this.dialog.plan = true
			this.$nextTick(() => {
				this.$refs.planDialog.open('edit').setData(row)
			})
		},
		// 添加提醒
		addPlan(date){
            console.log('date :>> ', date);
			this.dialog.plan = true
			var reqData = {type: 2,date:date}
			this.$nextTick(() => {
				this.$refs.planDialog.open('add').setData(reqData)
			})
		},
		// 删除提醒
		delPlan(row){
			var reqData = {id: row.id}
			this.$confirm(`确定删除${row.title}吗？`, '提示', {
				type: 'warning'
			}).then(async() => {
                var res = await this.$API.basic.plan.delete.post(reqData);
                if(res.code == 1){
                    this.plan()
                    this.$refs.table.refresh()
                    this.$message.success("删除成功")
                }else{
                    this.$alert(res.message, "提示", {type: 'error'})
                }
			}).catch(() => {

			})
		},
        // 完成提醒
        async overPlan(row){
            var reqData = {id: row.id,status: 1}
            var res = await this.$API.basic.plan.checkStatus.post(reqData);
			console.log(res);
			if(res.code == 1){
				this.plan()
                // this.$refs.table.refresh()
				this.$message.success("操作成功")
			}else{
				this.$alert(res.message, "提示", {type: 'error'})
			}
        },
	}
}
</script>
<style>
.el-calendar-table .el-calendar-day {
	height: auto;
}
</style>
<style scoped lang="scss">
.is-selected {
    color: #1989FA;
}
.round {
	width: 15px;
	height: 15px;
	display: inline-block;
	border-radius: 50%;
	background: #fff;
	margin-left: 5px;
	transform: translateY(2px);
}

.el-card-row {
	color: #fff;
	border-radius: 4px;
	box-shadow: 1px 1px 4px 1px #e5e5e5;
}

.widgets-wrapper .card-row .el-col:nth-child(1) .el-card-row {
	background: linear-gradient(120deg, #64BAAA, #56B4D3);
}

.widgets-wrapper .card-row .el-col:nth-child(2) .el-card-row {
	background: linear-gradient(120deg, #d6707b, #FF956A);
}

.widgets-wrapper .card-row .el-col:nth-child(3) .el-card-row {
	background: linear-gradient(120deg, #008DD7, #928DAB);
}

.widgets-wrapper .card-row .el-col:nth-child(4) .el-card-row {
	background: linear-gradient(120deg, #4ECDC4, #556270);
}

.el-col .el-card {
	margin-bottom: 0;
}

.card-body {
	font-size: 32px;
	.el-icon {
		font-size: 32px;
	}
}

.el-icon {
	transform: translateY(3px);
}
.custom-tabs-label .custom-tabs-label-date{
	font-size: 12px;
    color: rgb(186, 172, 172);
}
.el-tabs__item.is-active .custom-tabs-label .custom-tabs-label-date{
	color: var(--el-color-primary);
}
</style>
